<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="/css/common.css?v=2" rel="stylesheet">

    <title>最美时光</title>
</head>
<body style="color: #696969">
<div class="container-fluid" id="app" v-cloak>
    <div class="row" style="padding-top: 10%">
        <div class="col">
            <h1>最美时光</h1>
        </div>
    </div>
    <div class="row" style="padding-top: 5%">
        <div class="col">
            <p>有一天，呆坐在房间，胡思乱想，觉得未来好遥远</p>
            <p>听一段旋律，想起她，只是笑，不再怀念</p>
            <p>有一天，看时针走过零点，还没长大，但已成年</p>
            <p>和过去的自己相逢，才发现，我从未改变</p>
            <p>时间，最美</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div v-for="moment in moments" style="padding-top: 3%">
                <h4>{{ moment.title }} <small>{{ moment.duration_format }}</small></h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" v-bind:style="{'width': moment.duration_day / maxDurationDay * 100 + '%', 'background-color': moment.color, 'min-width': '20%'}">{{ moment.duration_day }} days</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.26.0/axios.min.js"></script>

<script src="/js/env.js?v=1"></script>
<script src="/js/common.js?v=2"></script>
<script>
    // let serverData = {"max_duration_day":1934,"timezone":"UTC","list":[{"date":"2015-03-24","color":"#FF8C00","duration_day":1934,"duration_format":"5 years 3 months 15 days","title":"程序员"},{"date":"2020-06-10","color":"#FFB6C1","duration_day":29,"duration_format":"0 years 0 months 29 days","title":"我想静静"},{"date":"2019-11-01","color":"#BB8FCE","duration_day":251,"duration_format":"0 years 8 months 8 days","title":"小龟龟"}]};
    // let vm = initVueApp();
    let serverData, vm;
    axios.get(env.apiPrefix + '/moments', {})
        .then(function (response) {
            if (response.data.code) {
                return;
            }
            serverData = response.data.data;
            vm = initVueApp();
        });

    function initVueApp() {
        return new Vue({
            el: '#app',
            data: {
                moments: serverData.list,
                maxDurationDay: serverData.max_duration_day
            }
        });
    }
</script>
</body>
</html>

